<!-- html -->
<template>
  <el-table
    v-if="refreshTable"
    v-loading="loading"
    :data="areaList"
    row-key="id"
    :default-expand-all="isExpandAll"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <el-table-column label="省市区名字" prop="name" />
    <el-table-column label="类型" align="center" prop="category">
      <template #default="scope">
        <dict-tag :options="area_type" :value="scope.row.category" />
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      align="center"
      class-name="small-padding fixed-width"
    >
      <template #default="scope">
        <el-button
          link
          type="primary"
          icon="Edit"
          @click="handleUpdate(scope.row)"
          v-hasPermi="['wms:area:edit']"
          >修改</el-button
        >
        <el-button
          link
          type="primary"
          icon="Plus"
          @click="handleAdd(scope.row)"
          v-hasPermi="['wms:area:add']"
          >新增</el-button
        >
        <el-button
          link
          type="primary"
          icon="Delete"
          @click="handleDelete(scope.row)"
          v-hasPermi="['wms:area:remove']"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
<!-- 
    ts 
   setup  支持setup语法糖
-->
<script lang="ts" setup>
import { ref, defineProps,defineEmits } from "vue";

//接收父组件参数
let props = defineProps({
  refreshTable: {
    type: Boolean,
    default: true,
  },
  loading: {
    type: Boolean,
    default: true,
  },
  areaList: {
    type: Array,
    default: [],
  },
  isExpandAll: {
    type: Boolean,
    default: true,
  },
  area_type: {
    type: Array,
    default: [],
  },
});

//定义事件
const emits = defineEmits(['handleUpdate'])

///修改
let handleUpdate=(row)=>{
    //调用父组件方法
    emits('handleUpdate',row)
}

//添加
let handleAdd=()=>{
    //调用父组件方法

}

//删除s
let handleDelete=()=>{
    //调用父组件方法

}



</script>
<!-- css样式 -->
<style scoped>
</style>